<template>
  <div>
    <div v-if="!dialogVisible">
      <div class="header-container">
        <div class="header-content">
          <img class="header-icon" referrerpolicy="no-referrer" src="@/assets/img/module1/page1top2.png" />
          <span class="header-title">用户使用需求</span>
        </div>
        <div class="operation-bar">
          <div class="left-operations">
            <!-- 原生下拉框 -->
            <div class="dropdown-wrapper">
              <select class="dropdown-native" v-model="order">
                <option value="时间最新">时间最新</option>
                <option value="时间最早">时间最早</option>
              </select>
            </div>

            <!-- 操作按钮 (原生 HTML 按钮) -->
            <button class="native-action-button" @click="handleSort">
              <img src="@/assets/img/module1/page1img2.png" alt="操作按钮图标" />
            </button>

            <!-- 用户名搜索框 -->
            <div class="search-wrapper">
              <input type="text" class="search-input" v-model="userName" placeholder="搜索用户名" />
            </div>

            <!-- 用户单ID搜索框 -->
            <div class="search-wrapper">
              <input type="text" class="search-input" v-model="applicationId" placeholder="搜索用户单ID" />
            </div>

            <!-- 申请状态下拉框 -->
            <div class="dropdown-wrapper">
              <select class="dropdown-native" v-model="approvalStatus">
                <option value="">所有状态</option>
                <option value="1">已批准</option>
                <option value="0">未批准</option>
                <option value="2">被驳回</option>
              </select>
            </div>

            <!-- 查询按钮 (Element UI) -->
            <el-button type="primary" icon="el-icon-search" class="el-query-button" @click="handleQuery">查询</el-button>
          </div>

          <!-- 刷新按钮 (Element UI) -->
          <div class="refresh-wrapper">
            <el-button type="primary" icon="el-icon-refresh" class="el-refresh-button"
              @click="handleRefresh">刷新</el-button>
          </div>
        </div>

      </div>

      <!-- 表格展示 -->
      <div class="body-container">
        <div class="regional_table">
          <!-- el-table 表格 -->
          <el-table :data="tableDatayhr" style="width: 100%; height: 92%;max-width: calc(80vw - 0px);"
            :max-height="tableMaxHeight" empty-text="暂无数据">
            <!-- 序号列 -->
            <el-table-column label="序号" :min-width="80" :max-width="100">
              <template #default="scope">
                {{ scope.row.id }}
              </template>
            </el-table-column>

            <!-- 动态渲染列 -->
            <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label"
              :min-width="120" :max-width="250">
              <!-- 使用 scoped slot 为 approvalStatus 列添加自定义样式 -->
              <template v-if="column.prop === 'approvalStatus'" #default="scope">
                <span :style="{
                  color:
                    scope.row.approvalStatus === '未批准'
                      ? 'rgb(0, 123, 255)'
                      : scope.row.approvalStatus === '被驳回'
                        ? 'rgb(139, 0, 0)'
                        : 'inherit',
                }">
                  {{ scope.row.approvalStatus }}
                </span>
              </template>
            </el-table-column>

            <!-- 操作栏 -->
            <el-table-column label="操作" :min-width="100" :max-width="150">
              <template #default="scope">
                <button @click="handleView(scope.row)" class="view-button">查看</button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页组件 -->
          <div class="pagenation">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>


    <!-- <custom-dialog v-else :visible.sync="dialogVisible" :title="selectedTitle" :dialogData="selectedRow" /> -->
    <custom-dialog v-else :visible.sync="dialogVisible" :title="selectedTitle" :dialogData="selectedRow"
      @status-updated="fetchAirspaceDemand" />
  </div>
</template>

<script>
import CustomDialog from '@/components/CustomDialogModule1.vue';
import axios from 'axios';

export default {
  name: "Module1AirspaceNeed",
  components: {
    CustomDialog,
  },
  data() {
    return {
      tableMaxHeight: 450, // 默认值
      tableDatayhr: [],
      tableColumns: [
        // { prop: 'id', label: '#' },
        { prop: 'userName', label: '用户名' },
        { prop: 'applicationId', label: '申请单ID' },
        { prop: 'applicationAcceptanceTime', label: '接收时间' }, // 使用slot来显示带图标的列
        { prop: 'approvalStatus', label: '申请状态' }
      ],
      dialogVisible: false, // 控制弹窗显示状态
      selectedRow: null, // 当前选中的行数据
      selectedTitle: null,
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 100, // 总条数
      order: '时间最新', // 排序方式默认时间最新
      keyText: '', // 关键字搜索文本
      userName: '', // 新增
      applicationId: '', // 新增
      approvalStatus: '', // 新增
    };
  },
  created() {
    this.calculateTableHeight();
  },
  watch: {
  },
  beforeDestroy() {
    // 在组件销毁前移除监听器
    window.removeEventListener('resize', this.calculateTableHeight);
  },
  methods: {
    calculateTableHeight() {
      const windowHeight = window.innerHeight;
      this.tableMaxHeight = windowHeight * 0.7;
      console.log("此时的tableMaxHeight", this.tableMaxHeight)
    },
    // 查询按钮处理逻辑
    handleQuery() {
      this.fetchAirspaceDemand();
    },
    handleSort() {
      // 发起排序请求，使用当前的排序方式
      this.fetchAirspaceDemand();
    },
    handleRefresh() {
      // 恢复到初始状态
      this.order = '时间最新';
      this.userName = '';
      this.applicationId = '';
      this.approvalStatus = '';

      // 重新发送请求
      this.fetchAirspaceDemand();
    },
    async fetchAirspaceDemand() {
      try {
        const params = {
          currentPage: this.currentPage,
          size: this.pageSize,
          order: this.order || '时间最新',
          userName: this.userName || null, // 添加用户名搜索条件
          applicationId: this.applicationId || null, // 添加用户单ID搜索条件
          approvalStatus: this.approvalStatus !== '' ? parseInt(this.approvalStatus, 10) : null, // 添加申请状态筛选条件
        };

        // 如果关键字有值，则添加到params中
        if (this.keyText) {
          params.keyText = this.keyText;
        }

        console.log("使用需求页面获取所有数据时给后端发送的", params);
        // const response = await axios.post('http://127.0.0.1:4523/m2/5137922-4801689-default/214412673');
        // 向后端发送POST请求
        const response = await axios.post('http://47.99.75.194:8081/admin/airspaceDemand/keywordSearch', params);

        this.tableDatayhr = response.data.data.pageData.map((item, index) => ({
          // id: item.id,
          id: this.pageSize * (this.currentPage - 1) + index + 1,  // 序号根据当前页和每页条数生成
          userName: item.userName,
          applicationId: item.applicationId,
          applicationAcceptanceTime: (() => {
            const date = new Date(item.applicationAcceptanceTime);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');

            return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
          })(),
          approvalStatus: item.approvalStatus === 1 ? '已批准' : item.approvalStatus === 0 ? '未批准' : '被驳回' // 根据状态值映射文本
        }));

        this.total = response.data.data.total; // 更新总条数
        console.log("airspaceDemand接口返回的数据", response);
        console.log("更新后的this.total", this.total);
      } catch (error) {
        console.error('Error fetching airspace demand:', error);
      }
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.fetchAirspaceDemand(); // 当页大小改变时重新获取数据
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.fetchAirspaceDemand(); // 当当前页改变时重新获取数据
    },
    handleView(row) {
      this.selectedRow = row;
      console.log("选择的用户的行", this.selectedRow)
      this.selectedTitle = row.applicationId;
      this.dialogVisible = true;
    },
  },
  mounted() {
    // 初始化时计算高度
    this.calculateTableHeight();
    // 监听窗口大小变化
    window.addEventListener('resize', this.calculateTableHeight);
    this.fetchAirspaceDemand();
  }
};
</script>
<style lang="scss" scoped>
@import "../assets/demo/index.scss";
</style>
<style scoped>
/* 顶部容器样式 */
.header-container {
  width: 100%;
  /* 占据整个宽度 */
  position: relative;
  /* 定位为相对页面顶部 */
  top: 0;
  left: 0;
}

/* 顶部内容区样式 */
.header-content {
  position: relative;
  width: 100%;
  background: url("@/assets/img/module1/page1top.png") no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  padding: 0px;
}

/* 标题样式 */
.header-title {
  background-image: linear-gradient(180deg, rgba(200, 215, 228, 1) 0, rgba(255, 255, 255, 1) 100%);
  position: relative;
  flex: 2;
  margin-left: 5%;
  width: 20%;
  height: 20%;
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: PangMenZhengDao-3;
  text-align: left;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 图标样式 */
.header-icon {
  position: relative;
  width: 22px;
  height: 20px;
  margin-left: 20px;
  /* 与其他内容间隔 */
  margin-top: -20px;
}




/* 操作栏容器 */
/* 操作栏容器 */
.operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 4vh;
  padding: 1vh 0vw;
}

/* 左侧操作部分 */
.left-operations {
  display: flex;
  align-items: center;
}

/* 刷新按钮部分 */
.refresh-wrapper {
  margin-left: auto;
}

/* 下拉框部分 (原生下拉框) */
.dropdown-wrapper {
  /* width: 20%; */
  width: 18%;
}

.dropdown-native {
  width: 100%;
  padding: 0.5vh;
  font-size: 2vh;
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #fff;
}

.dropdown-native option {
  background-color: transparent;
  color: black;
}

/* 操作按钮 */
.native-action-button {
  display: flex;
  align-items: center;
  border: none;
  border-radius: 5px;
  font-size: 2vh;
  cursor: pointer;
  background-color: transparent;
}

.native-action-button img {
  width: 100%;
  height: auto;
}

/* 搜索框部分 */
.search-wrapper {
  width: 15%;
  margin-right: 1vw;
}

.search-input::placeholder {
  color: white !important;
  opacity: 1;
}

.search-input {
  width: 100%;
  padding: 0.5vh;
  font-size: 2vh;
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #fff;
}

/* 查询按钮样式 */
.el-query-button {
  font-size: 2vh;
  padding: 0.5vh 1vw;
  margin-left: 1rem;
}

/* 刷新按钮样式 */
.el-refresh-button {
  font-size: 2vh;
  padding: 0.5vh 1vw;
  margin-right: 1rem;
}




.view-button {
  background: transparent;
  /* 背景透明 */
  border: none;
  /* 去掉默认按钮边框 */
  color: #648bf4;
  /* 深蓝色字体 */
  font-size: 14px;
  /* 字体大小 */
  cursor: pointer;
  /* 鼠标悬停时显示手型 */
}

.view-button:hover {
  text-decoration: underline;
  /* 悬停时下划线 */
}


.body-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 99%;
  padding: 1vh 1vw 1vh 0;
}

.regional_table {
  overflow-y: auto;
  /* 超出时垂直滚动 */
  height: 75vh;

}

/* 隐藏滚动条 - Webkit浏览器（Chrome, Safari等） */
.regional_table::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 隐藏滚动条 - Firefox */
.regional_table {
  scrollbar-width: none;
  /* Firefox 隐藏滚动条 */
}

/* 隐藏滚动条 - IE/Edge */
.regional_table {
  -ms-overflow-style: none;
  /* IE/Edge 隐藏滚动条 */
}



/* 最外层透明表格背景与白色字体 */
.regional_table /deep/ .el-table,
.regional_table /deep/ .el-table__expanded-cell {
  background-color: transparent;
  /* 设置透明背景 */
}

/* 针对 el-table 隐藏滚动条 */
.el-table__body-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.regional_table /deep/ .el-table__body-wrapper {
  scrollbar-width: none;
  /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none;
  /* IE/Edge 隐藏滚动条 */
}

/* 表格头部和单元格的背景颜色透明 */
.regional_table /deep/ .el-table th,
.regional_table /deep/ .el-table tr,
.regional_table /deep/ .el-table td {
  background-color: transparent !important;
  /* 背景透明 */
  color: rgb(216, 208, 208);
  /* 确保文字为白色 */
  font-size: 0.9rem;
}

/* 设置表格边框 */
.regional_table /deep/ .el-table__body-wrapper {
  border: 0.5px solid transparent;
  /* 边框为白色 */
}

/* 如果表头或其他部分需要特殊透明处理 */
.regional_table /deep/ .el-table__header-wrapper {
  background-color: rgba(255, 255, 255, 0.1);
  /* 表头轻微透明 */
}

.regional_table /deep/ .el-table .el-table__cell {
  padding: 0.5rem;
}


/* pagenation */
.pagenation {
  /* height: 10%; */
  margin-top: 1rem;
  float: right;
}

.regional_table /deep/ .el-pagination.is-background .el-pager li {
  background: transparent;
  color: #a09292;
}

.regional_table /deep/ .el-pagination.is-background .btn-prev {
  background: transparent;
}

.regional_table /deep/ .el-input__inner {
  background-color: transparent;
  color: #fff;
}
</style>
